<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <my-Components2 :title="title" :age="age" :names="names" /> -->
  <!-- <my-Components7 /> -->

  <!-- <router-link to="/">首页 |</router-link>
  <router-link to="/about">关于</router-link> -->
  <!-- <router-link to="/news">新闻</router-link> -->
  <!-- <router-view></router-view> -->

  <!-- 读取vuex -->
  <!-- <p>counter ={{ $store.state.counter }}</p>
   
   <p>count ={{getCounter}}</p>
   <button @click="addClickHandle">自增</button> -->
  <NewFeature msg="数据"/>
</template>

<script>
// import MyComponents2 from './components/MyComponents2.vue'
//  import MyComponents7 from './components/MyComponents7.vue'
import NewFeature from './components/NewFeature.vue'
import { mapGetters } from 'vuex';
import { provide } from 'vue';

export default {
  name: 'App',
  data() {
    return {
      title: "我是一个标题",
      age: 19,
      names: ["iwen", "ime", "frank"]
    }
  },
  methods: {
    getDataHandle(data) {
      console.log(data);
    },
    addClickHandle() {
      //固定调用方式
      this.$store.commit("addCounter", 15)
    },
    addAsyncClickHandle() {
      this.state.dispatch("asyncAddCounter")
    }

  },
  computed: {
    //拿到 store中的counter
    ...mapGetters(["getCounter"])
  },
  components: {
    NewFeature
  },
  setup(){
    provide("message","传递的消息体1")
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
